// 交易统计

import { Card,Descriptions} from 'antd';
import { useEffect,useState } from 'react';
import { getStaEchart2Api,getStaDescriptions1Api } from "@/api/statistics";
import ReactEcharts from 'echarts-for-react';
import CardRightButton from './component/CardRightButton';


const CardButton = [
  { label: '昨天', value: 'yesterday' },
  { label: '最近7天', value: 'late7' },
  { label: '最近30天', value: 'late30' },
];
// const CardButton3 = [
//   { label: '本月', value: 'thisMouth' },
//   { label: '上月', value: 'preMouth' },
// ];
const initButtonValue = 'yesterday'
// const initButtonValue2 = 'thisMouth'

export default function TransactionStatistics() {

  const [option1Data,setOption1Data] = useState([
    { value: 0, name: '浏览' },
    { value: 0, name: '下单' },
    { value: 0, name: '付款' },
  ])
  const [option2Data,setOption2Data] = useState([11, 55, 11, 124, 356, 330, 220])
  // const [option3Data,setOption3Data] = useState([
  //   { value: 728, name: '新客户' ,itemStyle:{color:'rgb(255,163,102)'}},
  //   { value: 272, name: '老客户' },
  // ])

  const getOption1 = ()=>{
    const option = {
      title: {
        text: '数据漏斗'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c}%'
      },
      toolbox: {
        feature: {
          dataView: { readOnly: false ,title:'文本预览'},
          restore: {title:'刷新'},
          saveAsImage: {name:'统计数据数据图',title:'下载'}
        }
      },
      legend: {
        data: ['浏览', '下单', '付款']
      },
      series: [
        {
          name: '统计数据',
          type: 'funnel',
          left: '10%',
          top: 60,
          bottom: 60,
          width: '80%',
          min: 0,
          max: 100,
          minSize: '0%',
          maxSize: '100%',
          sort: 'descending',
          gap: 2,
          label: {
            show: true,
            position: 'inside'
          },
          labelLine: {
            length: 10,
            lineStyle: {
              width: 1,
              type: 'solid'
            }
          },
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 1
          },
          emphasis: {
            label: {
              fontSize: 20
            }
          },
          data: option1Data
        }
      ]
    }
    return option
  }
  const getOption2 = ()=>{
    const option = {
      title: {
        subtext: '付款订单数'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['0-50', '50-100', '100-200', '200-500', '500-1000', '1000-3000', '3000以上'],
          axisTick: {
            alignWithLabel: true
          },
          name:'订单金额(元)'
        }
      ],
      yAxis: [
        {
          type: 'value',
          // name:'付款订单数'
        }
      ],
      series: [
        {
          name: '订单:',
          type: 'bar',
          barWidth: '60%',
          // showBackground: true,
          data: option2Data,
          itemStyle: {
            color: 'rgb(255,102,0)'
          }
        }
      ]
    }
    return option
  }
  // const getOption3 = ()=>{
  //   const option = {
  //     title: {
  //       text: '新老客户交易构成',
  //       left: 'center'
  //     },
  //     tooltip: {
  //       trigger: 'item'
  //     },
  //     legend: {
  //       orient: 'vertical',
  //       left: 'left'
  //     },
  //     series: [
  //       {
  //         type: 'pie',
  //         radius: '50%',
  //         data: option3Data,
  //         emphasis: {
  //           itemStyle: {
  //             shadowBlur: 10,
  //             shadowOffsetX: 0,
  //             shadowColor: 'rgba(0, 0, 0, 0.5)'
  //           }
  //         },
  //         label:{ 
  //           show: true, 
  //           //formatter: '{b} : {c} ({d}%)' //带当前图例名 + 百分比
  //           formatter: '{b} : {d}%' //只要百分比
  //         }, 
  //         labelLine :{show:true}
  //       }
  //     ]
  //   }
  //   return option
  // }
  

  const [Descriptions1,setDescriptions1] = useState({
    look:'暂无数据',
    place_order_person:'暂无数据',
    orderNUm:'暂无数据',
    place_order_goods:'暂无数据',
    effective_order:'暂无数据',
    order_money:'暂无数据',
    refund_money:'暂无数据',
    pay_person:'暂无数据',
    pay_order:'暂无数据',
    pay_goods:'暂无数据',
    pay_money:'暂无数据',
    unit_price:'暂无数据'
  })


  //获取echart数据
  const getEchartData1 = (val:any)=>{
    setOption1Data([
      { value: ~~val.look, name: '浏览' },
      { value: ~~val.place_order_person, name: '下单' },
      { value: ~~val.pay_person
        , name: '付款' },
    ])
  }
  const getEchartData2 = async(val:{})=>{
    const {data:echartData} = await getStaEchart2Api(val)
    
    setOption2Data(echartData)
  }
  // const getEchartData3 = async(val:{})=>{
  //   const {data:{echartData}} = await getStaEchart3Api(val)
  //   setOption3Data(echartData)
  // }

  // 获取描述表格数据
  const getDescriptions1 =async (val:{}) => {
    const {data:DescriptionsData} = await getStaDescriptions1Api(val)
    getEchartData1(DescriptionsData)
    setDescriptions1(DescriptionsData)
  }
  //选择日期
  const oneChooseTime = (val:{})=>{
    getDescriptions1(val)
  }
  const twoChooseTime = (val:{})=>{
    getEchartData2(val)
  } 
  useEffect(()=>{
    getEchartData2({time:'yesterday'})
    // getEchartData3({time:'thisMouth'})
    getDescriptions1({time:'yesterday'})
  },[])
  const changeButton1 = (val :any)=>{
    getDescriptions1({time:val})
  }
  const changeButton2 = (val :any)=>{
    getEchartData2({time:val})
  }
  // const changeButton3 = (val :any)=>{
  //   getEchartData3(val)
  // }

  
  return (
      <div className="TransactionStatistics">
        <p className="head">交易统计</p>
        <Card title="综合统计" type="inner" style={{ marginTop:'20px'}} extra={<CardRightButton optionsWithDisabled={CardButton} changeButton={changeButton1} initButtonValue = {initButtonValue} ChooseTime={oneChooseTime} Picker={true}></CardRightButton>}>
        <Descriptions title="数据概览" bordered  column = {6} layout={'vertical'} style={{marginBottom:'40px'}}>
              <Descriptions.Item label="浏览人数">{Descriptions1.look}</Descriptions.Item>
              <Descriptions.Item label="下单人数">{Descriptions1.place_order_person}</Descriptions.Item>
              <Descriptions.Item label="订单数">{Descriptions1.orderNUm}</Descriptions.Item>
              <Descriptions.Item label="下单件数">{Descriptions1.place_order_goods}</Descriptions.Item>
              <Descriptions.Item label="有效订单数">{Descriptions1.effective_order}</Descriptions.Item>
              <Descriptions.Item label="下单金额">{Descriptions1.order_money}</Descriptions.Item>
              <Descriptions.Item label="退款金额">{Descriptions1.refund_money}</Descriptions.Item>
              <Descriptions.Item label="付款人数">{Descriptions1.pay_person}</Descriptions.Item>
              <Descriptions.Item label="付款订单数">{Descriptions1.pay_order}</Descriptions.Item>
              <Descriptions.Item label="付款件数">{Descriptions1.pay_goods}</Descriptions.Item>
              <Descriptions.Item label="付款金额">{Descriptions1.pay_money}</Descriptions.Item>
              <Descriptions.Item label="客单价">{Descriptions1.unit_price}</Descriptions.Item>
            </Descriptions>
          <ReactEcharts option={getOption1()} notMerge={true} style={{height:'400px'}}></ReactEcharts>
        </Card>
        <Card title="交易数据" type="inner" style={{ marginTop:'20px'}} extra={<CardRightButton optionsWithDisabled={CardButton} changeButton={changeButton2} initButtonValue = {initButtonValue} ChooseTime={twoChooseTime} Picker={true}></CardRightButton>}>
          <ReactEcharts option={getOption2()} className='echart2'></ReactEcharts>
        </Card>
        {/* <Card title="新老客户交易构成" type="inner" style={{ marginTop:'20px'}} extra={<CardRightButton optionsWithDisabled={CardButton3} changeButton={changeButton3} initButtonValue = {initButtonValue2}></CardRightButton>}>
          <ReactEcharts option={getOption3()} className='echart3'></ReactEcharts>
        </Card> */}
      </div>
  )
}